<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑脸</title>
    <style>
        canvas {
          border: 1px solid  #333;
        }
      </style>
    </head>
    <body>
      <canvas id="app" width="500" height="500"></canvas>
    </body>
    <script>
      window.onload = function() {
        // 1.获取画布节点对象
        var canvas = document.querySelector('#app');
        // 2.获取画布的上下文对象（画笔）
        var context = canvas.getContext('2d');
        // 3.开始路径
        context.beginPath();
        context.arc(200,200,100,0,Math.PI*2,true)
        context.fillStyle = 'yellow';
        context.strokeStyle = 'black';
        context.fill();
        context.stroke();


        //左眼
        context.beginPath();
        context.arc(150,180,20,0,Math.PI*2,true)
        context.fillStyle = 'white';
        context.strokeStyle = 'black';
        context.fill();
        context.stroke();
        //右眼
        context.beginPath();
        context.arc(250,180,20,0,Math.PI*2,true)
        context.fillStyle = 'white';
        context.strokeStyle = 'black';
        context.fill();
        context.stroke();
         //左眼珠
         context.beginPath();
        context.arc(150,180,10,0,Math.PI*2,true)
        context.fillStyle = 'black';
        context.strokeStyle = 'black';
        context.fill();
        context.stroke();
        //右眼珠
        context.beginPath();
        context.arc(250,180,10,0,Math.PI*2,true)
        context.fillStyle = 'black';
        context.strokeStyle = 'black';
        context.fill();
        context.stroke();

        context.beginPath();
        context.arc(200,200,60,57,Math.PI*10/12,false)
        context.fillStyle = 'teal';
        context.strokeStyle = 'black';
        context.stroke();

       
      }
    </script>
    </html>

